<template>
	<view class="wallet_class" :class="type?'wallet_class_kq':'wallet_class_gb'" v-if="topayPwds">
		<view style="width: 750rpx;height: 100vh;" @tap="toCancel" v-if="keep"></view>
		<view class="wallet_content" :class="type?'wallet_kq':'wallet_gb'"
			:style="'background-image: url('+keyImg+ ')'">
			<!-- 头部 -->
			<view class="wallet_content_tb" :style="keyImg?'':'background-image: url('+topImg+')'">
				<view style="width: 100rpx;text-align: center;font-size: 40rpx;" @tap="toCancel" :style="'color:'+ titeColor">
					×
				</view>
				<view style="width: 550rpx;text-align: center;" :style="'color:'+ titeColor">{{tite}}</view>
				<view style="width: 100rpx;">
				</view>
			</view>
			<view class="capsule">
				<view class="money">
					{{money}}
				</view>
				
				<view class="pay-pwd-input">
					<view class="pay-pwd-grid" v-for="(value, index) in payPwdGrid" :key="index">
						<view>{{value.text}}</view>
					</view>
				</view>
				<view v-if="$slots.custom" class="custom">
				  <slot name="custom"></slot>
				</view>
				<view class="jp_hea" :style="keyImg?'':'background-color: #f5f5f5'">
					<view class="jq_key">
						<view @touchend="inputPwd(list[1])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[1]" hover-class="click_hover">{{list[1]}}</view>
						<view @touchend="inputPwd(list[2])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[2]" hover-class="click_hover">{{list[2]}}</view>
						<view @touchend="inputPwd(list[3])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[3]" hover-class="click_hover">{{list[3]}}</view>
					</view>
					<view class="jq_key">
						<view @touchend="inputPwd(list[4])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[4]" hover-class="click_hover">{{list[4]}}</view>
						<view @touchend="inputPwd(list[5])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[5]" hover-class="click_hover">{{list[5]}}</view>
						<view @touchend="inputPwd(list[6])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[6]" hover-class="click_hover">{{list[6]}}</view>
					</view>
					<view class="jq_key">
						<view @touchend="inputPwd(list[7])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[7]" hover-class="click_hover">{{list[7]}}</view>
						<view @touchend="inputPwd(list[8])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[8]" hover-class="click_hover">{{list[8]}}</view>
						<view @touchend="inputPwd(list[9])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[9]" hover-class="click_hover">{{list[9]}}</view>
					</view>
					<view class="jq_key">
						<view class="keyboard" :style="keyImg?'':'background-color: #fff'"></view>
						<view @touchend="inputPwd(list[0])" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							:data-char="list[0]" hover-class="click_hover">{{list[0]}}</view>
						<view @touchend="backspace()" class="keyboard" :style="keyImg?'':'background-color: #fff'"
							data-char="×" hover-class="click_hover">×</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'wallet_category',
		props: {
			money: { //支付的金额
				type: [String, Number],
				default: '0'
			},
			tite: { //标题
				type: String,
				default: ''
			},
			titeColor: { //标题颜色
				type: String,
				default: '#333'
			},
			cancelType: { //是否输入完密码后消失
				type: Boolean,
				default: false
			},
			keep: { //点击遮挡是否关闭
				type: Boolean,
				default: false
			},
			places: { // 密码框位数
				type: Number,
				default: 6
			},
			topImg: {
				type: String,
				default: ''
			},
			keyImg: {
				type: String,
				default: ''
			},
			random: {
				type: Boolean,
				default: false
			},
			isPwy: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				topayPwds: false,
				msgs: '',
				type: true,
				password: [],
				payPwdGrid: [],
				list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		mounted() {
			if (this.random) {
				this.list.sort(function() {
					return (0.5 - Math.random());
				});
			}
			this.payPwdGrid = []
			for (let a = 0; a < this.places; a++) {
				this.payPwdGrid.push({
					text: ''
				})
			}
		},
		watch: {
			msg() {
				this.msgs = this.msg
			},
			places() {
				this.payPwdGrid = []
				for (let a = 0; a < this.places; a++) {
					this.payPwdGrid.push({
						text: ''
					})
				}
			}
		},
		methods: {
			toOpen() {
				this.type = true
				this.topayPwds = true;
			},
			toCancel() {
				let taht = this
				this.type = false
				setTimeout(function clock() {
					taht.topayPwds = false;
					taht.backs()
					taht.$emit('toCancel');
				}, 200)
			},
			forget() {
				this.$emit('forget');
			},
			/* 小键盘输入 */
			inputPwd(e) {
				let char = e;
				let args = {
					target: this,
					data: char
				};
				let passIndex = this.password.length;
				if (passIndex < this.places) {
					this.password.push(char);
					if (this.isPwy) {
						this.payPwdGrid[passIndex].text = "●";
					} else {
						this.payPwdGrid[passIndex].text = char;
					}
					this.$emit('inputPwd', char);
					// 改变密码框
					if (this.password.length === this.payPwdGrid.length) {
						//长度达6位，自动验证
						this.$emit('completed', this.password.join(''));
						if (this.cancelType) {
							this.toCancel()
						}
					}
				}
			},
			/* 回退 */
			backspace() {
				let passIndex = this.password.length;
				if (this.password.length > 0) {
					// 改变密码框
					this.password = this.password.slice(0, this.password.length - 1);
					this.payPwdGrid[passIndex - 1].text = "";
					return;
				}
			},
			// 清空密码
			backs() {
				this.password.forEach((el, index) => {
					let passIndex = this.password.length;
					if (this.password.length > 0) {
						// 改变密码框
						this.password = this.password.slice(0, this.password.length - 1);
						this.payPwdGrid[passIndex - 1].text = "";
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes downIn {
		from {
			transform: translateY(50vh);
			opacity: 1;
		}

		to {
			transform: translateY(0vh);
			opacity: 1;
		}
	}

	@keyframes downInClose {
		from {
			transform: translateY(0vh);
			opacity: 1;
		}

		to {
			transform: translateY(50vh);
			opacity: 1;
		}
	}

	.wallet_class {
		position: fixed;
		z-index: 9999;
		height: 100vh;
		width: 750rpx;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);

		.wallet_kq {
			animation: downIn 0.3s;
			-webkit-animation: downIn 0.3s;
		}

		.wallet_gb {
			animation: downInClose 0.3s;
			-webkit-animation: downInClose 0.3s;
		}

		.wallet_content {
			background-size: 100% 100%;
			background-position: top left;
			background-repeat: no-repeat;
			position: fixed;
			bottom: 0rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			width: 750rpx;
			background-color: #fff;


			.wallet_content_tb {
				display: flex;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-size: 100%;
				background-position: top left;
				background-repeat: no-repeat;
				justify-content: space-between;
				height: 100rpx;
				width: 750rpx;
				line-height: 100rpx;

			}

			.money {
				width: 690rpx;
				text-align: center;
				font-size: 60rpx;
				color: #333;
				margin: 0 auto;
				font-weight: 800;
			}

			.capsule {
				position: relative;
				.custom{
					margin-top: 40rpx;
				}
				.pay-pwd-input {
					width: 750rpx;
					display: flex;
					justify-content: center;
					margin-top: 40rpx;
					.pay-pwd-grid {
						display: flex;
						margin: 0 10rpx;
						justify-content: center;

						view {
							width: 80rpx;
							height: 80rpx;
							background-color: #ececec;
							color: #333;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							font-size: 26rpx;
							font-weight: 500;
						}
					}

				}

				.jp_hea {
					margin-top: 10rpx;
					height: 30vh;

					.jq_key {
						display: flex;
						justify-content: flex-start;
						height: 25%;

						.keyboard {
							box-sizing: border-box;
							width: 250rpx;
							height: 100%;
							line-height: 100%;
							background-color: rgba(255, 255, 255, .3);
							border-top: #f7f4f4 solid 0.1rpx;
							border-left: #f7f4f4 solid 0.1rpx;
							font-size: 40rpx;
							font-weight: 600;
							display: flex;
							justify-content: center;
							align-items: Center;
						}

						.click_hover {
							animation: showPopup 0.1s linear both;
						}
					}
				}


				@keyframes showPopup {
					0% {
						opacity: 0;
						background-color: #d8d8d8;
					}

					100% {
						opacity: 1;
					}
				}
			}
		}
	}
</style>